<div style="width: 100%;position: relative;">
    <div *ngIf="isToRemove" style="margin-top: 20px;margin-bottom: 20px;">
        {{'msg.device-remove' | translate}} '{{data.device.name}}' ?
    </div>
    <div *ngIf="!isToRemove">
        <h1 mat-dialog-title style="display:inline-block; cursor:move; padding-top: 15px" mat-dialog-draggable *ngIf="!isFuxaServer">
            {{'device.property-client' | translate}}</h1>
        <h1 mat-dialog-title style="display:inline-block; cursor:move; padding-top: 15px" mat-dialog-draggable *ngIf="isFuxaServer">
            {{'device.property-server' | translate}}</h1>
        <mat-icon (click)="onNoClick()" style="float:right;cursor:pointer;color:gray;position: relative; top: 10px; right: 0px">clear</mat-icon>
    </div>
    <div style="overflow-y: hidden; overflow-x: hidden; padding-top: 5px;" *ngIf="!isToRemove">
        <div style="display: block;">
            <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                <span>{{'device.property-name' | translate}}</span>
                <input [(ngModel)]="data.device.name" style="width: 350px" type="text" [disabled]="isFuxaServer">
            </div>
            <div class="my-form-field" style="display: inline-block;margin-bottom: 10px;" *ngIf="!isFuxaServer">
                <span>{{'device.property-type' | translate}}</span>
                <mat-select [(value)]="data.device.type" (selectionChange)="onDeviceTypeChanged()" #devicetype style="width: 160px" [disabled]="isFuxaServer">
                    <mat-option *ngFor="let type of deviceType | enumToArray" [value]="type.key">
                        {{ type.value }}
                    </mat-option>
                </mat-select>
            </div>
            <div class="my-form-field" style="display: inline-block;margin-left: 15px;font-size: 14px;" *ngIf="data.device.type === deviceType.internal">
                {{'device.property-internal' | translate}}
            </div>
            <div class="my-form-field inbk " [style.marginLeft.px]="(isFuxaServer) ? 0 : 15" *ngIf="isWithPolling && data.device.type !== deviceType.internal">
                <span>{{'device.property-polling' | translate}}</span>
                <mat-select [(value)]="data.device.polling" style="width: 80px">
                    <mat-option *ngFor="let polling of pollingType" [value]="polling.value" [disabled]="isFuxaServer && polling.value > 3000">
                        {{ polling.text }}
                    </mat-option>
                </mat-select>
            </div>
            <div *ngIf="!isFuxaServer && data.device.type !== deviceType.internal" class="my-form-field" style="display: inline-block;margin-bottom: 10px;text-align: center;width: 80px;">
                <span>{{'device.property-enable' | translate}}</span>
                <mat-slide-toggle color="primary" [(ngModel)]="data.device.enabled"></mat-slide-toggle>
            </div>
            <div *ngIf="data.device.property && data.device.type" [ngSwitch]="data.device.type">
                <div *ngSwitchCase="deviceType.OPCUA">
                    <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                        <span>{{'device.property-address-opc' | translate}}</span>
                        <input [(ngModel)]="data.device.property.address" style="width: 350px" type="ip" (click)="onAddressChanged()">
                    </div>
                    <div class="my-form-field" class="my-expansion-panel">
                        <mat-expansion-panel #panelProperty
                            (closed)="onPropertyExpand(false)" (opened)="onPropertyExpand(true);onCheckOpcUaServer()">
                            <mat-expansion-panel-header class="header" [collapsedHeight]="'32px'" [expandedHeight]="'32px'"
                                style="padding-left:5px !important;padding-right:17px !important; font-size: 13px;">
                                <mat-panel-title>
                                    <span *ngIf="propertyExpanded">{{'device.property-security' | translate}}</span>
                                    <span *ngIf="!propertyExpanded">{{'device.not-property-security' | translate}}</span>
                                </mat-panel-title>
                            </mat-expansion-panel-header>
                            <div *ngIf="propertyLoading">
                                <mat-spinner style="margin: auto" diameter="20"></mat-spinner>
                            </div>
                            <div *ngIf="!propertyLoading" class="my-expansion-conent">
                                <mat-radio-group [(ngModel)]="securityRadio">
                                    <mat-radio-button style="display:block;padding-left:10px;padding-bottom:2px;font-size: 13px;" *ngFor="let sec of securityMode;"
                                        [value]="sec.value">{{sec.text}}</mat-radio-button>
                                </mat-radio-group>
                                <div *ngIf="!propertyError" style="display: block;margin: 5px 10px 0px 10px;">
                                    <div class="my-form-field">
                                        <span>{{'general.username' | translate}}</span>
                                        <input [(ngModel)]="security.username" style="width: 315px;background-color:var(--formInputExtBackground)" type="text">
                                    </div>
                                    <div class="my-form-field" style="margin-top: 5px;">
                                        <span>{{'general.password' | translate}}</span>
                                        <input autocomplete="off" (keydown)="keyDownStopPropagation($event)" [type]="showPassword ? 'text' : 'password'" [(ngModel)]="security.password" style="width: 315px;background-color:var(--formInputExtBackground)">
                                        <mat-icon matSuffix (click)="showPassword = !showPassword" class="show-password">{{showPassword ? 'visibility' : 'visibility_off'}}</mat-icon>
                                    </div>
                                </div>
                                <div *ngIf="propertyError" style="display: block;margin: 5px 10px 0px 10px;width: 315px; color: red;">
                                    <span>{{propertyError}}</span>
                                </div>
                            </div>
                        </mat-expansion-panel>
                    </div>
                </div>
                <div *ngSwitchCase="deviceType.BACnet">
                    <div class="my-form-field"
                         style="display: block;margin-bottom: 10px;">
                        <span>{{'device.property-interface-address' | translate}}</span>
                        <input [(ngModel)]="data.device.property.address"
                               placeholder="{{'device.property-interface-address-ph' | translate}}"
                               class="address"
                               type="ip"
                               (click)="onAddressChanged()">
                    </div>
                    <div class="my-form-field block mb10">
                        <span>{{'device.property-broadcast-address' | translate}}</span>
                        <input [(ngModel)]="data.device.property.broadcastAddress"
                               placeholder="{{'device.property-broadcast-address-ph' | translate}}"
                               class="address"
                               type="ip"
                               (click)="onAddressChanged()">
                    </div>
                    <div class="my-form-field"
                         style="display: inline-block;margin-bottom: 10px;">
                        <span>{{'device.property-adpu-timeout' | translate}}</span>
                        <input numberOnly
                               [(ngModel)]="data.device.property.adpuTimeout"
                               placeholder="{{'device.property-adpu-timeout-ph' | translate}}"
                               class="adpu"
                               type="number">
                    </div>
                </div>
                <div *ngSwitchCase="deviceType.SiemensS7">
                    <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                        <span>{{'device.property-address-s7' | translate}}</span>
                        <input [(ngModel)]="data.device.property.address" style="width: 350px" type="ip" (click)="onAddressChanged()">
                    </div>
                    <div class="my-form-field" style="display: inline-block;margin-bottom: 10px;padding-right: 10px;">
                        <span>{{'device.property-rack' | translate}}</span>
                        <input numberOnly [(ngModel)]="data.device.property.rack" style="width: 80px" type="text">
                    </div>
                    <div class="my-form-field" style="display: inline-block;margin-bottom: 10px;">
                        <span>{{'device.property-slot' | translate}}</span>
                        <input numberOnly [(ngModel)]="data.device.property.slot" style="width: 80px" type="text">
                    </div>
                </div>
                <div *ngSwitchCase="deviceType.ModbusRTU">
                    <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                        <span>{{'device.property-connection-options' | translate}}</span>
                        <mat-select [(value)]="data.device.property.connectionOption" style="width: 262px">
                            <mat-option *ngFor="let value of modbusRtuOptionType" [value]="value">
                                {{ value }}
                            </mat-option>
                        </mat-select>
                    </div>
                    <div style="display: block;margin-bottom: 10px;">
                        <div class="my-form-field" style="display: inline-block;">
                            <span>{{'device.property-serialport' | translate}}</span>
                            <input [(ngModel)]="data.device.property.address" style="width: 262px" type="ip" (click)="onAddressChanged()">
                        </div>
                        <div class="my-form-field" style="display: inline-block;margin-left: 15px;">
                            <span>{{'device.property-slave-id' | translate}}</span>
                            <input numberOnly [(ngModel)]="data.device.property.slaveid" style="width: 65px" type="text">
                        </div>
                    </div>
                    <div class="my-form-field" style="display: inline-block;margin-bottom: 10px;padding-right: 10px;">
                        <span>{{'device.property-baudrate' | translate}}</span>
                        <mat-select [(value)]="data.device.property.baudrate" style="width: 75px">
                            <mat-option *ngFor="let value of baudrateType" [value]="value">
                                {{ value }}
                            </mat-option>
                        </mat-select>
                    </div>
                    <div class="my-form-field" style="display: inline-block;margin-bottom: 10px;padding-right: 10px;">
                        <span>{{'device.property-databits' | translate}}</span>
                        <mat-select [(value)]="data.device.property.databits" style="width: 50px">
                            <mat-option *ngFor="let value of databitsType" [value]="value">
                                {{ value }}
                            </mat-option>
                        </mat-select>
                    </div>
                    <div class="my-form-field" style="display: inline-block;margin-bottom: 10px;padding-right: 10px;">
                        <span>{{'device.property-stopbits' | translate}}</span>
                        <mat-select [(value)]="data.device.property.stopbits" style="width: 50px">
                            <mat-option *ngFor="let value of stopbitsType" [value]="value">
                                {{ value }}
                            </mat-option>
                        </mat-select>
                    </div>
                    <div class="my-form-field" style="display: inline-block;margin-bottom: 10px;">
                        <span>{{'device.property-parity' | translate}}</span>
                        <mat-select [(value)]="data.device.property.parity" style="width: 74px">
                            <mat-option *ngFor="let value of parityType" [value]="value">
                                {{ value }}
                            </mat-option>
                        </mat-select>
                    </div>
                    <div class="mb10 block">
                        <div class="my-form-field inbk" style="width: 100px; text-align: center;">
                            <span>{{'device.property-tockenized' | translate}}</span>
                            <mat-slide-toggle color="primary" [(ngModel)]="data.device.property.options"></mat-slide-toggle>
                        </div>
                        <div class="my-form-field inbk" style="display: inline-block;margin-left: 50px;">
                            <span>{{'device.property-delay' | translate}}</span>
                            <input numberOnly [(ngModel)]="data.device.property.delay" style="width: 100px" type="number">
                        </div>
                    </div>
                </div>
                <div *ngSwitchCase="deviceType.ModbusTCP">
                    <div class="mb10 block">
                        <div class="my-form-field inbk">
                            <span>{{'device.property-connection-options' | translate}}</span>
                            <mat-select [(value)]="data.device.property.connectionOption" style="width: 200px">
                                <mat-option *ngFor="let value of modbusTcpOptionType" [value]="value">
                                    {{ value }}
                                </mat-option>
                            </mat-select>
                        </div>
                        <div class="my-form-field inbk ml10 ftr">
                            <span>{{'device.property-socket-reuse' | translate}}</span>
                            <mat-select [(value)]="data.device.property.socketReuse" style="width: 130px">
                                <mat-option [value]=""></mat-option>
                                <mat-option *ngFor="let mode of modbusReuseModeType | enumToArray" [value]="mode.key">
                                    {{ mode.value }}
                                </mat-option>
                            </mat-select>
                        </div>
                    </div>
                    <div class="my-form-field" style="display: inline-block;margin-bottom: 10px;">
                        <span>{{'device.property-address-port' | translate}}</span>
                        <input [(ngModel)]="data.device.property.address" style="width: 262px" type="ip" (click)="onAddressChanged()">
                    </div>
                    <div class="my-form-field" style="display: inline-block;margin-left: 15px;">
                        <span>{{'device.property-slave-id' | translate}}</span>
                        <input numberOnly [(ngModel)]="data.device.property.slaveid" style="width: 65px" type="text">
                    </div>
                    <div class="mb10 block">
                        <div class="my-form-field inbk" style="width: 100px; text-align: center;">
                            <span>{{'device.property-tockenized' | translate}}</span>
                            <mat-slide-toggle color="primary" [(ngModel)]="data.device.property.options"></mat-slide-toggle>
                        </div>
                        <div class="my-form-field inbk" style="display: inline-block;margin-left: 50px;">
                            <span>{{'device.property-delay' | translate}}</span>
                            <input numberOnly [(ngModel)]="data.device.property.delay" style="width: 100px" type="number">
                        </div>
                    </div>
                </div>
                <div *ngSwitchCase="deviceType.WebAPI">
                    <div class="my-form-field" style="display: inline-block;margin-bottom: 10px;">
                        <span>{{'device.property-method' | translate}}</span>
                        <mat-select [(value)]="data.device.property.method" style="width: 160px">
                            <mat-option *ngFor="let value of methodType" [value]="value">
                                {{ value }}
                            </mat-option>
                        </mat-select>
                    </div>
                    <div class="my-form-field" style="margin-bottom: 10px; float: right;">
                        <span>{{'device.property-format' | translate}}</span>
                        <mat-select [(value)]="data.device.property.format" style="width: 168px">
                            <mat-option *ngFor="let value of parserType" [value]="value">
                                {{ value }}
                            </mat-option>
                        </mat-select>
                    </div>
                    <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                        <span>{{'device.property-url' | translate}}</span>
                        <input [(ngModel)]="data.device.property.address" style="width: 350px" type="ip" (click)="onAddressChanged()">
                    </div>
                    <div class="my-form-field" class="my-expansion-panel">
                        <mat-expansion-panel [disabled]="!data.device.property.method || !data.device.property.address" #panelProperty
                            (closed)="onPropertyExpand(false)" (opened)="onPropertyExpand(true);onCheckWebApi()">
                            <mat-expansion-panel-header class="header" [collapsedHeight]="'32px'" [expandedHeight]="'32px'"
                                style="padding-left:5px !important;padding-right:17px !important;font-size: 13px;">
                                <mat-panel-title>
                                    <span *ngIf="propertyExpanded">{{'device.property-webapi-result' | translate}}</span>
                                    <span *ngIf="!propertyExpanded">{{'device.not-webapi-result' | translate}}</span>
                                </mat-panel-title>
                            </mat-expansion-panel-header>
                            <div *ngIf="propertyLoading">
                                <mat-spinner style="margin: auto" diameter="20"></mat-spinner>
                            </div>
                            <div *ngIf="!propertyLoading">
                                <div class="my-form-field multiline" style="display: block;margin: 5px 5px 0px 5px;font-size: 13px;">
                                    {{result}}
                                </div>
                            </div>
                        </mat-expansion-panel>
                    </div>
                </div>
                <div *ngSwitchCase="deviceType.MQTTclient">
                    <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                        <span>{{'device.property-mqtt-address' | translate}}</span>
                        <input [(ngModel)]="data.device.property.address" style="width: 350px" type="ip" (click)="onAddressChanged()">
                    </div>
                    <div class="my-form-field" class="my-expansion-panel">
                        <mat-expansion-panel #panelProperty
                            (closed)="onPropertyExpand(false)" (opened)="onPropertyExpand(true);">
                            <mat-expansion-panel-header class="header" [collapsedHeight]="'32px'" [expandedHeight]="'32px'">
                                <mat-panel-title>
                                    <span *ngIf="propertyExpanded">{{'device.property-security' | translate}}</span>
                                    <span *ngIf="!propertyExpanded">{{'device.not-property-security' | translate}}</span>
                                </mat-panel-title>
                            </mat-expansion-panel-header>
                            <div *ngIf="propertyLoading">
                                <mat-spinner style="margin: auto" diameter="20"></mat-spinner>
                            </div>
                            <ng-container *ngIf="!propertyLoading">
                                <div class="expand-panel">
                                    <div class="my-form-field">
                                        <span>{{'general.clientId' | translate}}</span>
                                        <input [(ngModel)]="security.clientId" style="width: 315px;background-color:var(--formInputExtBackground)" type="text">
                                    </div>
                                    <div class="my-form-field">
                                        <span>{{'general.username' | translate}}</span>
                                        <input [(ngModel)]="security.username" style="width: 315px;background-color:var(--formInputExtBackground)" type="text">
                                    </div>
                                    <div class="my-form-field">
                                        <span>{{'general.password' | translate}}</span>
                                        <input autocomplete="off" (keydown)="keyDownStopPropagation($event)" [type]="showPassword ? 'text' : 'password'" [(ngModel)]="security.password" style="width: 315px;background-color:var(--formInputExtBackground)">
                                        <mat-icon matSuffix (click)="showPassword = !showPassword" class="show-password">{{showPassword ? 'visibility' : 'visibility_off'}}</mat-icon>
                                    </div>
                                </div>
                            </ng-container>
                        </mat-expansion-panel>
                    </div>
                    <div class="my-form-field" class="my-expansion-panel">
                        <mat-expansion-panel #panelCertificate
                            (closed)="onPropertyExpand(false)" (opened)="onPropertyExpand(true);">
                            <mat-expansion-panel-header class="header" [collapsedHeight]="'32px'" [expandedHeight]="'32px'">
                                <mat-panel-title>
                                    <span>{{'device.property-certificate-section' | translate}}</span>
                                </mat-panel-title>
                            </mat-expansion-panel-header>
                            <ng-container>
                                <div class="expand-panel">
                                    <div class="my-form-field block">
                                        <span>{{'device.property-certificate' | translate}}</span>
                                        <app-file-upload [fileName]="security.certificateFileName"
                                                         destination="certificates"
                                                         (onFileChange)="security.certificateFileName = $event?.name ? $event.name : null">
                                        </app-file-upload>
                                    </div>
                                    <div class="my-form-field block">
                                        <span>{{'device.property-certificate-key' | translate}}</span>
                                        <app-file-upload [fileName]="security.privateKeyFileName"
                                                         destination="certificates"
                                                         (onFileChange)="security.privateKeyFileName = $event?.name ? $event.name : null">
                                        </app-file-upload>
                                    </div>
                                    <div class="my-form-field block">
                                        <span>{{'device.property-certificate-ca' | translate}}</span>
                                        <app-file-upload [fileName]="security.caCertificateFileName"
                                                         destination="certificates"
                                                         (onFileChange)="security.caCertificateFileName = $event?.name ? $event.name : null">
                                        </app-file-upload>
                                    </div>
                                </div>
                            </ng-container>
                        </mat-expansion-panel>
                    </div>
                </div>
                <div *ngSwitchCase="deviceType.EthernetIP">
                    <div class="my-form-field" style="display: inline-block; margin-bottom: 10px;">
                        <span>{{'device.property-address-port' | translate}}</span>
                        <input [(ngModel)]="data.device.property.address" style="width: 350px" type="ip" (click)="onAddressChanged()">
                    </div>
                    <div style="display: block; height: 45px;">
                        <div class="my-form-field" style="display: inline-block; text-align: center;width: 80px;">
                            <span>{{'device.property-routing' | translate}}</span>
                            <mat-slide-toggle color="primary" [(ngModel)]="data.device.property.options"></mat-slide-toggle>
                        </div>
                        <div class="my-form-field" style="display: inline-block; margin-left: 10px;" *ngIf="data.device.property.options">
                            <input numberOnly [(ngModel)]="data.device.property.rack" style="width: 20px;" type="text">
                            <input numberOnly [(ngModel)]="data.device.property.slot" style="width: 20px; margin-left: 5px;" type="text">
                        </div>
                    </div>
                </div>
                <div *ngSwitchCase="deviceType.ODBC">
                    <div class="my-form-field block">
                        <span>{{'device.property-dsn' | translate}}</span>
                        <input [(ngModel)]="data.device.property.address" style="width: 350px" type="ip" (click)="onAddressChanged()">
                    </div>
                    <div class="my-form-field block mt5">
                        <span>{{'general.username' | translate}}</span>
                        <input [(ngModel)]="security.username" style="width: 350px;" type="text">
                    </div>
                    <div class="my-form-field block mt5">
                        <span>{{'general.password' | translate}}</span>
                        <input autocomplete="off" [(ngModel)]="security.password" (keydown)="keyDownStopPropagation($event)" [type]="showPassword ? 'text' : 'password'" style="width: 350px;">
                        <mat-icon matSuffix (click)="showPassword = !showPassword" class="show-password">{{showPassword ? 'visibility' : 'visibility_off'}}</mat-icon>
                    </div>
                    <div class="my-form-field my-expansion-panel">
                        <mat-expansion-panel [disabled]="!data.device.property.address" #panelProperty
                            (closed)="onPropertyExpand(false)" (opened)="onPropertyExpand(true);onCheckOdbc()">
                            <mat-expansion-panel-header class="header" [collapsedHeight]="'32px'" [expandedHeight]="'32px'"
                                style="padding-left:5px !important;padding-right:17px !important;font-size: 13px;">
                                <mat-panel-title>
                                    <span *ngIf="propertyExpanded">{{'device.property-odbc-result' | translate}}</span>
                                    <span *ngIf="!propertyExpanded">{{'device.not-odbc-result' | translate}}</span>
                                </mat-panel-title>
                            </mat-expansion-panel-header>
                            <div *ngIf="propertyLoading">
                                <mat-spinner style="margin: auto" diameter="20"></mat-spinner>
                            </div>
                            <div *ngIf="!propertyLoading" class="my-expansion-conent">
                                <mat-radio-group [(ngModel)]="tableRadio">
                                    <mat-radio-button *ngFor="let table of databaseTables;" style="display:block;padding-left:10px;padding-bottom:2px;font-size: 13px;"
                                        [value]="table">{{table}}</mat-radio-button>
                                </mat-radio-group>
                                <div *ngIf="propertyError" class="error">
                                    <span>{{propertyError}}</span>
                                </div>
                            </div>

                        </mat-expansion-panel>
                    </div>
                </div>
                <div *ngSwitchCase="deviceType.Gpio">
                    <!-- property config --->
                </div>
            </div>
        </div>
    </div>
    <div mat-dialog-actions class="dialog-action">
        <button mat-raised-button (click)="onNoClick()">{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button color="primary" [disabled]="!isValid(data.device)" (click)="onOkClick()" [mat-dialog-close]="data">{{'dlg.ok' |
            translate}}</button>
    </div>
</div>
